<template>
 <div id="vis-div">
   <div class="vis-box1">
      <div id="vis-box11">

      </div>
<!--     <img src="../../assets/imgs/按钮-切换.png"-->
<!--          class="img-change"-->
<!--          @click="isChange()"-->
<!--          style="width: 20px; height: 20px; float: right"-->
<!--          alt="">-->
      <div id="vis-box12">

      </div>
      <div id="vis-box13">

      </div>
   </div>
   <div class="vis-box2">
     <div id="vis-box21">

     </div>
     <div id="vis-box22">

     </div>
   </div>
   <div class="vis-box4">
     <div id="vis-box41">

     </div>
     <div id="vis-box42">

     </div>
   </div>
   <div class="vis-box3">
     <div id="vis-box31">

     </div>
   </div>
 </div>
</template>

<script>
import * as echarts from 'echarts';
import "echarts-wordcloud/dist/echarts-wordcloud";
import "echarts-wordcloud/dist/echarts-wordcloud.min";

import $ from 'jquery'
export default {
  name: 'DataVisualization',
  data() {
    return {

    }
  },
  mounted() {
    this.getData1("贵州省");
    this.getData2("贵州省各地区");
    this.getData4("贵州省");
    this.getData6("贵州省");
    this.getData8("贵州省");
    this.getData9("贵州省");
    this.getData12("贵州省");
    this.getData14("贵州省");
    let dataClick = echarts.init(document.getElementById('vis-box12'));
    dataClick.on('click',  (res) =>{
      this.initMap(res.name);
      if(res.name === '黔东南苗族侗族自治州') {
        this.getData3("黔东南");
        this.getData5("黔东南");
        this.getData7("黔东南");
        this.getData10("黔东南");
        this.getData11("黔东南");
        this.getData13("黔东南");
        this.getData15("黔东南");

      }else if(res.name === '安顺市') {
        this.getData3("安顺");
        this.getData5("安顺");
        this.getData7("安顺");
        this.getData10("安顺");
        this.getData11("安顺");
        this.getData13("安顺");
        this.getData15("安顺");

      }else if(res.name === '毕节市') {
        this.getData3("毕节");
        this.getData5("毕节");
        this.getData7("毕节");
        this.getData10("毕节");
        this.getData11("毕节");
        this.getData13("毕节");
        this.getData15("毕节");

      }else if(res.name === '遵义市') {
        this.getData3("遵义");
        this.getData5("遵义");
        this.getData7("遵义");
        this.getData10("遵义");
        this.getData11("遵义");
        this.getData13("遵义");
        this.getData15("遵义");

      }else if(res.name === '铜仁市') {
        this.getData3("铜仁");
        this.getData5("铜仁");
        this.getData7("铜仁");
        this.getData10("铜仁");
        this.getData11("铜仁");
        this.getData13("铜仁");
        this.getData15("铜仁");

      }else if(res.name === '贵阳市') {
        this.getData3("贵阳");
        this.getData5("贵阳");
        this.getData7("贵阳");
        this.getData10("贵阳");
        this.getData11("贵阳");
        this.getData13("贵阳");
        this.getData15("贵阳");

      }else if(res.name === '六盘水市') {
        this.getData3("六盘水");
        this.getData5("六盘水");
        this.getData7("六盘水");
        this.getData10("六盘水");
        this.getData11("六盘水");
        this.getData13("六盘水");
        this.getData15("六盘水");

      }else if(res.name === '黔南布依族苗族自治州') {
        this.getData3("黔南");
        this.getData5("黔南");
        this.getData7("黔南");
        this.getData10("黔南");
        this.getData11("黔南");
        this.getData13("黔南");
        this.getData15("黔南");

      }else if(res.name === '黔西南布依族苗族自治州') {
        this.getData3("黔西南");
        this.getData5("黔西南");
        this.getData7("黔西南");
        this.getData10("黔西南");
        this.getData11("黔西南");
        this.getData13("黔西南");
        this.getData15("黔西南");

      }else {
        this.getData1("贵州省");
        this.getData2("贵州省各地区");
        this.getData4("贵州省");
        this.getData6("贵州省");
        this.getData8("贵州省");
        this.getData9("贵州省");
        this.getData12("贵州省");
        this.getData14("贵州省");
      }

    })
  },
  // created() {
  //   this.$nextTick(() => {
  //     this.getData8("贵州省");
  //   })
  // },
  methods: {
    open1(msg) {
      this.$notify({
        title: msg,
        message: '这是一条成功的提示消息',
        type: 'success'
      });
    },
    open2(msg) {
      this.$notify({
        title: msg,
        message: '这是一条警告的提示消息',
        type: 'warning'
      });
    },
    open4(msg) {
      this.$notify.error({
        title: msg,
        message: '这是一条错误的提示消息'
      });
    },
    // isChange() {
    //   this.getData1("贵州省");
    //   this.getData2("贵州省各地区");
    //   this.getData4("贵州省");
    //   this.getData6("贵州省");
    //   this.getData8("贵州省");
    //   this.getData9("贵州省");
    //   this.getData12("贵州省");
    // },
    // 请求
    getData1(dqName) {
      this.$axios.get('/api/vis/data1', {

      }).then(res =>{
        if(res.data.code === 20041) {
          let data = [];

          for (let i = 0; i < res.data.data.length; i++) {
            if(res.data.data[i].param === '黔东南') {
              data.push(
                  {name: "黔东南苗族侗族自治州", value: res.data.data[i].param1},
              )
            }else if(res.data.data[i].param === '贵阳') {
              data.push(
                  {name: "贵阳市", value: res.data.data[i].param1},
              )
            }else if(res.data.data[i].param === '铜仁') {
              data.push(
                  {name: "铜仁市", value: res.data.data[i].param1},
              )
            }else if(res.data.data[i].param === '黔西南') {
              data.push(
                  {name: "黔西南布依族苗族自治州", value: res.data.data[i].param1},
              )
            }else if(res.data.data[i].param === '毕节') {
              data.push(
                  {name: "毕节市", value: res.data.data[i].param1},
              )
            }else if(res.data.data[i].param === '黔南') {
              data.push(
                  {name: "黔南布依族苗族自治州", value: res.data.data[i].param1},
              )
            }else if(res.data.data[i].param === '安顺') {
              data.push(
                  {name: "安顺市", value: res.data.data[i].param1},
              )
            }else if(res.data.data[i].param === '遵义') {
              data.push(
                  {name: "遵义市", value: res.data.data[i].param1},
              )
            }else if(res.data.data[i].param === '六盘水') {
              data.push(
                  {name: "六盘水市", value: res.data.data[i].param1},
              )
            }
          }
          this.initMap(dqName, data);
        }else {
          this.open2('数据请求失败');//查无此号
        }
      }).catch(error =>{
        console.log(error)
        this.open4("系统出错了")
      })
    },
    // bar
    getData2(name) {
      this.$axios.get('/api/vis/data1', {

      }).then(res =>{
        if(res.data.code === 20041) {
          let data1 = [];
          let data2 = [];
          for (let i = 0; i < res.data.data.length; i++) {
            if(res.data.data[i].param === '黔东南') {
              data1.push(
                  "黔东南苗族侗族自治州"
              )
              data2.push(
                  res.data.data[i].param1
              )
            }else if(res.data.data[i].param === '贵阳') {
              data1.push(
                  "贵阳市"
              )
              data2.push(
                  res.data.data[i].param1
              )
            }else if(res.data.data[i].param === '铜仁') {
              data1.push(
                  "铜仁市"
              )
              data2.push(
                  res.data.data[i].param1
              )
            }else if(res.data.data[i].param === '黔西南') {
              data1.push(
                  "黔西南布依族苗族自治州"
              )
              data2.push(
                  res.data.data[i].param1
              )
            }else if(res.data.data[i].param === '毕节') {
              data1.push(
                  "毕节市"
              )
              data2.push(
                  res.data.data[i].param1
              )
            }else if(res.data.data[i].param === '黔南') {
              data1.push(
                  "黔南布依族苗族自治州"
              )
              data2.push(
                  res.data.data[i].param1
              )
            }else if(res.data.data[i].param === '安顺') {
              data1.push(
                  "安顺市"
              )
              data2.push(
                  res.data.data[i].param1
              )
            }else if(res.data.data[i].param === '遵义') {
              data1.push(
                  "遵义市"
              )
              data2.push(
                  res.data.data[i].param1
              )
            }else if(res.data.data[i].param === '六盘水') {
              data1.push(
                  "六盘水市"
              )
              data2.push(
                  res.data.data[i].param1
              )
            }
          }
          this.initBar(name, data1, data2)
        }else {
          this.open2('数据请求失败');//查无此号
        }
      }).catch(error =>{
        console.log(error)
        this.open4("系统出错了")
      })
    },
    getData3(name) {
      this.$axios.post('/api/vis/data2', {
        "param": name
      }).then(res =>{
        if(res.data.code === 20041) {
          let data1 = [];
          let data2 = [];
          for (let i = 0; i < res.data.data.length; i++) {
            data1.push(
                res.data.data[i].param
            )
            data2.push(
                res.data.data[i].param1
            )
          }
          if(name !== "贵州省各地区") {
              name = name + "景点";
          }
          this.initBar(name, data1, data2)
        }else {
          this.open2('数据请求失败');//查无此号
        }
      }).catch(error =>{
        console.log(error)
        this.open4("系统出错了")
      })
    },
    getData4(name) {
      this.$axios.get('/api/vis/data3', {

      }).then(res =>{
        if(res.data.code === 20041) {
          let data1 = [];
          let data2 = [];
          for (let i = 0; i < res.data.data.length; i++) {
            if(res.data.data[i].param !== '未知') {
              data1.push(
                  res.data.data[i].param
              )
              data2.push(
                  res.data.data[i].param1
              )
            }
          }
          this.initArea(name, data1, data2)
        }else {
          this.open2('数据请求失败');//查无此号
        }
      }).catch(error =>{
        console.log(error)
        this.open4("系统出错了")
      })
    },
    getData5(name) {
      this.$axios.post('/api/vis/data4', {
        "param": name
      }).then(res =>{
        if(res.data.code === 20041) {
          let data1 = [];
          let data2 = [];
          for (let i = 0; i < res.data.data.length; i++) {
            if(res.data.data[i].param !== '未知') {
              data1.push(
                  res.data.data[i].param
              )
              data2.push(
                  res.data.data[i].param1
              )
            }
          }
          this.initArea(name, data1, data2)
        }else {
          this.open2('数据请求失败');//查无此号
        }
      }).catch(error =>{
        console.log(error)
        this.open4("系统出错了")
      })
    },
    getData6(name) {
      this.$axios.get('/api/vis/data5', {

      }).then(res =>{
        if(res.data.code === 20041) {
          let data = [];
          for (let i = 0; i < res.data.data.length; i++) {
            data.push(
                { value: res.data.data[i].param1, name: res.data.data[i].param },
            )
          }
          this.initPie(name, data)
        }else {
          this.open2('数据请求失败');//查无此号
        }
      }).catch(error =>{
        console.log(error)
        this.open4("系统出错了")
      })
    },
    getData7(name) {
      this.$axios.post('/api/vis/data6', {
        "param": name
      }).then(res =>{
        if(res.data.code === 20041) {
          let data = [];
          for (let i = 0; i < res.data.data.length; i++) {
            data.push(
                { value: res.data.data[i].param1, name: res.data.data[i].param },
            )
          }
          this.initPie(name, data)
        }else {
          this.open2('数据请求失败');//查无此号
        }
      }).catch(error =>{
        console.log(error)
        this.open4("系统出错了")
      })
    },
    // 消极
    getData8(name) {
      this.$axios.get('/api/vis/data7', {

      }).then(res =>{
        if(res.data.code === 20041) {
          let data = []
          for (let i = 0; i < res.data.data.length; i++) {
            if(res.data.data[i].param1 > 0) {
              data.push(
                  { value: res.data.data[i].param1 ,name: res.data.data[i].param},
              )
            }
          }
          this.initPassive(name, data);

        }else {
          this.open2('数据请求失败');//查无此号
        }
      }).catch(error =>{
        console.log(error)
        this.open4("系统出错了")
      })
    },
    getData9(name) {
      this.$axios.get('/api/vis/data8', {

      }).then(res =>{
        if(res.data.code === 20041) {
          let data = []
          for (let i = 0; i < res.data.data.length; i++) {
            if(res.data.data[i].param1 > 0) {
              data.push(
                  { value: res.data.data[i].param1 ,name: res.data.data[i].param},
              )
            }
          }
          this.initPositive(name, data);

        }else {
          this.open2('数据请求失败');//查无此号
        }
      }).catch(error =>{
        console.log(error)
        this.open4("系统出错了")
      })
    },
    getData10(name) {
      this.$axios.post('/api/vis/data9', {
        "param": name
      }).then(res =>{
        if(res.data.code === 20041) {
          let data = []
          for (let i = 0; i < res.data.data.length; i++) {
            if(res.data.data[i].param1 > 0) {
              data.push(
                  { value: res.data.data[i].param1 ,name: res.data.data[i].param},
              )
            }
          }
          this.initPassive(name, data);

        }else {
          this.open2('数据请求失败');//查无此号
        }
      }).catch(error =>{
        console.log(error)
        this.open4("系统出错了")
      })
    },
    getData11(name) {
      this.$axios.post('/api/vis/data10', {
        "param": name
      }).then(res =>{
        if(res.data.code === 20041) {
          let data = []
          for (let i = 0; i < res.data.data.length; i++) {
            if(res.data.data[i].param1 > 0) {
              data.push(
                  { value: res.data.data[i].param1 ,name: res.data.data[i].param},
              )
            }
          }
          this.initPositive(name, data);

        }else {
          this.open2('数据请求失败');//查无此号
        }
      }).catch(error =>{
        console.log(error)
        this.open4("系统出错了")
      })
    },
    getData12(name) {
      this.$axios.get('/api/vis/data13', {

      }).then(res =>{
        if(res.data.code === 20041) {
          let xDataArr = [];
          let yDataArr = [];
          for (let i = 0; i < res.data.data.length; i++) {
              xDataArr.push(
                  res.data.data[i].param
              );
              yDataArr.push(
                  res.data.data[i].param1
              )
          }
          this.initLine1(name, xDataArr, yDataArr);
          // console.log(xDataArr)
          // console.log(yDataArr)

        }else {
          this.open2('数据请求失败');//查无此号
        }
      }).catch(error =>{
        console.log(error)
        this.open4("系统出错了")
      })
    },
    getData13(name) {
      this.$axios.post('/api/vis/data14', {
        "param": name
      }).then(res =>{
        if(res.data.code === 20041) {
          let xDataArr = [];
          let yDataArr = [];
          for (let i = 0; i < res.data.data.length; i++) {
            xDataArr.push(
                res.data.data[i].param
            );
            yDataArr.push(
                res.data.data[i].param1
            )
          }
          this.initLine1(name, xDataArr, yDataArr);
          // console.log(xDataArr)
          // console.log(yDataArr)

        }else {
          this.open2('数据请求失败');//查无此号
        }
      }).catch(error =>{
        console.log(error)
        this.open4("系统出错了")
      })
    },
    getData14(name) {
      this.$axios.get('/api/vis/data15', {

      }).then(res =>{
        if(res.data.code === 20041) {
          let xDataArr = [];
          let yDataArr = [];
          for (let i = 0; i < res.data.data.length; i++) {
            xDataArr.push(
                res.data.data[i].param
            );
            yDataArr.push(
                res.data.data[i].param1
            )
          }
          this.initLine2(name, xDataArr, yDataArr);
          // console.log(xDataArr)
          // console.log(yDataArr)

        }else {
          this.open2('数据请求失败');//查无此号
        }
      }).catch(error =>{
        console.log(error)
        this.open4("系统出错了")
      })
    },
    getData15(name) {
      this.$axios.post('/api/vis/data16', {
        "param": name
      }).then(res =>{
        if(res.data.code === 20041) {
          let xDataArr = [];
          let yDataArr = [];
          for (let i = 0; i < res.data.data.length; i++) {
            xDataArr.push(
                res.data.data[i].param
            );
            yDataArr.push(
                res.data.data[i].param1
            )
          }
          this.initLine2(name, xDataArr, yDataArr);
          // console.log(xDataArr)
          // console.log(yDataArr)

        }else {
          this.open2('数据请求失败');//查无此号
        }
      }).catch(error =>{
        console.log(error)
        this.open4("系统出错了")
      })
    },
    // initLine1
    initLine1(name, xDataArr, yDataArr) {
      var chartDom = document.getElementById('vis-box41');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        title: {
          text: name + '季节评论趋势',
        },
        tooltip: {
          trigger: 'axis',
          formatter: "{b} : {c} 次",
          axisPointer: {
            type: 'cross'
          }
        },
        xAxis: {
          name: "季节",
          type: 'category',
          data: xDataArr,
          boundaryGap: false, // 第一个值紧挨Y轴
        },
        yAxis: {
          name: "评论数",
          type: 'value',
          scale: true, // 脱离0值比例
        },
        legend: {
          type: "plain",
          data: ['季节'],
          icon: "circle",
        },
        series: [{
          name: "季节",
          type: 'line',
          data: yDataArr,
          smooth: true, // 是否平滑
          stack: 'all', // 堆叠图的设置
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: 'red' // 0% 处的颜色
              }, {
                offset: 1,
                color: 'blue' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          }
        },
        ]
      }
      option && myChart.setOption(option);
    },
    initLine2(name, xDataArr, yDataArr) {
      var chartDom = document.getElementById('vis-box42');
      var myChart = echarts.init(chartDom);
      var option;
      option ={
        title: {
          text: name + '年份评论趋势',
        },
        tooltip: {
          trigger: 'axis',
          formatter: "{b} : {c} 次",
          axisPointer: {
            type: 'cross',
          }
        },
        grid: {
          left: 65,
          right: 20,
          bottom: 40,
          top: 30
        },
        xAxis: [
          {
            name: '年份',
            type: 'category',
            boundaryGap: false,
            data: xDataArr,
            axisLine: {
              lineStyle: {
                color: '#cecece'
              }
            },
            axisLabel: {
              color: '#666'
            },
            axisTick: {
              show: false
            },
            axisPointer: {
              snap: true
            }
          }
        ],
        yAxis: [
          {
            name: '评论数',
            type: 'value',
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#cecece'
              }
            },
            axisLabel: {
              color: '#666'
            },
            splitLine: {
              show: false
            },
            axisPointer: {
              snap: true
            }
          }
        ],
        series: [
          {
            // name: '年之最',
            type: 'line',
            data: yDataArr,
            smooth: true,
            symbol: 'circle',
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 0
              }
            },
            // markPoint: {
            //   data: [
            //     {
            //       name: '最高',
            //       value: 480,
            //       xAxis: 3,
            //       yAxis: 480,
            //       symbolSize: 40
            //     }
            //   ]
            // },
            itemStyle: {
              color: '#5171fd',
              borderColor: '#fff'
            },
            areaStyle: {
              normal: {
                shadowColor: 'rgba(133,203,247,0.75)',
                shadowBlur: 15
              }
            }
          }
        ]
      }
      option && myChart.setOption(option);
    },
    // pie
    initPie(name, data) {
      var chartDom = document.getElementById('vis-box22');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: name + '游客满意占比',
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '游客满意占比',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            padAngle: 5,
            itemStyle: {
              borderRadius: 10
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: data
          }
        ]
      };

      option && myChart.setOption(option);
    },
    // bar ip
    initArea(name, data1, data2) {
      var chartDom = document.getElementById("vis-box31");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: name + '评论游客ip汇总',
        },
        //   backgroundColor:"#0F285C",
        grid: {
          containLabel: true,
          top: 30,
          right: 15,
          bottom: 0,
          left: 15
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: 'shadow'
          },
          formatter: params => {
            console.log(params)
            const {
              name,
              data,
            } = params[0];
            return `
            <span style="font-size: 14px;font-family: Source Han Sans CN-Medium;font-weight: 500;color: #FFFFFF;margin-bottom:12px;">${name}</span>
            <sapn style="font-size: 14px;font-family: Source Han Sans CN-Medium;font-weight: 500;color: #FFFFFF;margin-bottom:4px;">：${data} 次</span>
         `
          },
          extraCssText: 'opacity: 0.8;background-color:#050F1B;padding:16px;box-shadow: 1px 6px 15px 1px rgba(0,0,0,0.13);border-radius: 4px;filter: blur(undefinedpx);border:none;'
        },
        xAxis: {
          // 类目轴
          name: "地区",
          type: "category",
          data: data1,
          axisTick: {
            show: false //隐藏X轴刻度
          },
          axisLine: {
            lineStyle: {
              color: "#CCCCCC"
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#000',
              fontSize: 14,
              fontFamily: 'Source Han Sans CN-Regular',
            }
          },
        },
        yAxis: {
          type: 'value',
          name: "评论次数",
          nameTextStyle: {
            color: 'rgba(0,0,0,0.65)',
            fontSize: 14,
            fontFamily: 'Source Han Sans CN-Regular',
            align: "left",
            verticalAlign: "center",
          },
          axisLabel: {
            color: 'rgba(0,0,0,0.65)',
            textStyle: {
              fontSize: 14
            },
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: 'rgba(223, 223, 223, 1)',
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(223, 223, 223, 1)',
              type: "dashed",
            }
          }
        },
        series: [
          {
            type: "bar",
            barWidth: "50%",
            showBackground: true,
            backgroundStyle: {
              color: "transparent"
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#4B87FFFF" },
                { offset: 1, color: "#82BCFFFF" }
              ])
            },
            data: data2
          }
        ]
      }
      option && myChart.setOption(option);
    },
    // bar 景点评论
    initBar(name, data1, data2) {
      var chartDom = document.getElementById("vis-box21");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: name + '评论次数',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          valueFormatter: (value) => value + '次' //改变显示文字
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          name: '景点评论次数',
          nameLocation: 'start',
          type: 'value',
          splitLine: { show: false },
          nameTextStyle: {
            color: 'black'
          },
          axisLine: {
            show: true
          },
          axisTick: {
            show: true //刻度线
          },
          splitNumber: 10,
          max: 12734
        },
        yAxis: {
          type: 'category',
          data: data1,
          axisLabel: {
            color: 'black'
          },
          axisLine: {
            show: false //隐藏y轴
          },
          axisTick: {
            show: false //刻度线
          }
        },
        series: [
          {
            type: 'bar',
            data: data2,
            itemStyle: {
              normal: {
                barBorderRadius: 31,// 让柱形上下变成圆角
                color: function (params) {
                  var colorList = ["#347caf", "#54bcbd", "#e99d42","#747caf","#327caf","#747caf","#827caf","#847caf",
                    "#4095e5", "#ff5b5b","#347caf","#1095e5","#e99d45", "#99bcbd","#887caf","#667caf","#667caf","#447caf"];
                  return colorList[params.dataIndex]
                },
                // label: {
                //   formatter: "{c}" + "次", //显示柱子上的文字
                //   show: true,
                //   position: [20, 27],
                //   textStyle: {
                //     fontWeight: "bolder",
                //     fontSize: "16",
                //     color: "#fff"
                //   }
                // }
              }
            }
          },
          // // 顶部的椭圆形(象形柱图):pictorialBar
          // {
          //   type: "pictorialBar",
          //   symbolSize: [40, 64],
          //   symbolOffset: [1, 0],
          //   z: 12,
          //   symbolPosition: "end",
          //   color: "#bbbbbb",
          //   data: data2
          // }
        ]
      };

      option && myChart.setOption(option);
    },
    // 积极词云
    initPositive(name, data) {
      var chartDom = document.getElementById("vis-box13");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        title: {
          text: name + '游客评论积极词云统计',
        },
        tooltip: {
          show: true,
          position: 'top',
          textStyle: {
            fontSize: 12
          }
        },
        series: [{
          type: "wordCloud",
          // 网格大小，各项之间间距 网格尺寸越大，单词之间的间距越大
          gridSize: 0,
          // 形状有(circle)圆形(默认)、(cardioid)心形，(diamond)菱形，
          // (triangle-forward)三角形向前，(triangle)三角形，(pentagon)五边形和(star)星形。*/
          shape: 'star',
          // 字体大小范围
          sizeRange: [16, 40],
          // 文字旋转角度范围
          rotationRange: [-60, 60],
          rotationStep: 5,
          // 自定义图形
          // maskImage: maskImage,
          //设置显示区域的位置以及大小
          left: 'center',
          top: 'center',
          right: null,
          bottom: null,
          width: '70%',
          height: '80%',
          // 是否渲染超出画布的文字
          drawOutOfBound: false,
          //如果字体太大而无法显示文本，
          //是否收缩文本。如果将其设置为false，则文本将不渲染。如果设置为true，则文本将被缩小。
          shrinkToFit: false,
          textStyle: {
            color: function () {
              return 'rgb(' + [
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160)
              ].join(',') + ')'
            },
          },
          emphasis: {
            textStyle: {
              fontWeight: 'bold',
              color: '#53F6FF',
            }
          },
          data: data
        }]
      };

      option && myChart.setOption(option);
    },
    // 消极
    initPassive(name, list) {
      var chartDom = document.getElementById("vis-box11");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: name + '游客评论消极词云统计',
        },
        tooltip: {
          show: true,
          borderColor: '#fe9a8bb3',
          borderWidth: 1,
          padding: [10, 15, 10, 15],
          confine: true,
          backgroundColor: 'rgba(255, 255, 255, .9)',
          textStyle: {
            color: 'hotpink',
            lineHeight: 22
          },
          extraCssText: 'box-shadow: 0 4px 20px -4px rgba(199, 206, 215, .7);border-radius: 4px;'
        },
        series: [
          {
            type: 'wordCloud',
            shape: 'pentagon',

            left: 'center',
            top: 'center',
            width: '100%',
            height: '100%',
            right: null,
            bottom: null,

            sizeRange: [14, 50],


            rotationRange: [0, 0],
            rotationStep: 0,


            gridSize: 25,

            drawOutOfBound: false,

            layoutAnimation: true,

            textStyle: {
              fontFamily: 'PingFangSC-Semibold',
              fontWeight: 600,
              color: function (params) {
                console.log(params)
                let colors = ['#fe9a8bb3', '#fe9a8bb3', '#fe9a8b03', '#9E87FFb3', '#9E87FFb3', '#9E87FFb3', '#fe9a8bb3', '#fe9a8bb3', '#fe9a8bb3', '#73DDFF', '#58D5FF']
                return colors[parseInt(Math.random() * 10)];
              },
            },
            emphasis: {
              focus: 'none',
            },

            // Data is an array. Each array item must have name and value property.
            data: list,
          },
        ],
      };


      option && myChart.setOption(option);

    },
    // 地图
    initMap(dqName, data) {
      var chartDom = document.getElementById('vis-box12');
      var myChart = echarts.init(chartDom);
      var option;
      var area;
      myChart.showLoading(dqName);
      $.get('/json/' + dqName + '.json', function (geoJson) {
        myChart.hideLoading();
        let sizeMap = 60;
        area = dqName;
        if(dqName === '贵州省') {
          area = "贵州省"
          sizeMap = 70;
        }
        echarts.registerMap('Beijing', geoJson);
        myChart.setOption(
            (option = {
              layoutCenter: ['45%', '50%'],//位置
              layoutSize: sizeMap + '%',//大小
              title: {
                text: area + '近年景评展示',
                subtext: 'The number of earthquakes in the past 10 years',
              },
              tooltip: {
                trigger: 'item',
                formatter: '{b}<br/>{c} (次)'
              },
              visualMap: {
                show: false,
                min: 800,
                max: 50000,
                text: ['High', 'Low'],
                realtime: false,
                calculable: true,
                inRange: {
                  color: ['lightskyblue', 'yellow', 'orangered']
                }
              },
              series: [
                {
                  name: '各地区地震次数',
                  type: 'map',
                  map: 'Beijing',
                  gooIndex: 0,
                  // aspectScale: 1,
                  zoom: 1.3,
                  itemStyle: {
                    go: {
                      regions:[
                        {
                          name: '南海诸岛',
                          value: 0,
                          itemStyle:{
                            normal: {
                              opacity: 0,
                              label: {
                                show: false
                              }
                            }
                          }
                        }
                      ],
                    }
                  },
                  label: {
                    show: true
                  },
                  data: data
                }
              ],
            })
        );
      });

      option && myChart.setOption(option);
    },
  }
}
</script>


<style scoped>
@import "css/DataVisualization.css";
</style>

